<!DOCTYPE HTML>
<html>
<head>
	<title>登录</title>
	<link rel="shortcut icon" href="/faviconaa.ico" type="image/x-icon" />
	<!-- Custom Theme files -->
	<link href="/static/common/css/login.css" rel="stylesheet" type="text/css" media="all"/>
	<link href="/static/common/css/layer.css" rel="stylesheet" type="text/css" media="all"/>
	<link href="/static/common/css/layui.css" rel="stylesheet" type="text/css" media="all"/>
	<script src="/static/common/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>

	<!-- Custom Theme files -->
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="keywords" content="Login form web template, Sign up Web Templates, Flat Web Templates, Login signup Responsive web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
	<!--Google Fonts-->
	<!--Google Fonts-->
	<style>
        body .msg_skin .layui-layer-content{
            padding: 20px;
            text-align: center;
            background: rgba(0,0,0,0.5);
            color: #FFFFFF;
            font-size: 16px;
            border-radius: 4px;
            font-weight: bold;
        }
        body .msg_skin{
            background: none;
            position: absolute;
        }
        .login .img {
            /*
			width: 50px;
			height: 40px;

			 */
            display: inline-block;
        }
        .login .img img{
            width: 100%;
        }
        .form-group{
            width: 340px;
        }
        .login{
            width: 512px;
            height: 350px;
            border-radius: 20px;
        }
        .login h3{
            height: 30px;
            padding-top: 20px;
        }
		.layui-form-item {
			width: 80%;
			padding-top: 20px;
		}
	</style>
</head>
<body>
<div class="login">
	<h3>
		<div class="img">
			<!--<img src="{$base_url_static}/img/logo.png?v=2"/>-->
		</div>
		<span></span><!--标题-->
	</h3>
	<form id="form" class="form-horizontal layui-form"  method="post" action="">
		@csrf
		<div class="layui-form-item">
			<div class="layui-input-block">
				<input type="text" id="username" name="username" required  lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input">
			</div>
		</div>

		<div class="layui-form-item">
			<div class="layui-input-block">
				<input type="password" id="password" name="password" required  lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
			</div>
		</div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <div style="width: 100%" class="layui-input-inline">
                    <input style="width: 60%; display: inline;" type="text" id="yzm" name="yzm" placeholder="请输入验证码" autocomplete="off" class="layui-input">
                    <div style="width: 38%; display:inline; text-align: right; width: 90%;">
                        <img style="border:2px solid #a1a1a1;border-radius:10px;-moz-border-radius:10px;" id="yzm-click" width="100" height="30" src="./getyzm">
                    </div>
                </div>
            </div>
        </div>

		<div class="layui-form-item">
			<div class="layui-input-block">
				<button style="width: 100%" class="layui-btn" id="sub" type="button" lay-filter="formDemo">登录</button>
			</div>
		</div>

	</form>
</div>
<script src="/static/common/js/three.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/common/js/layer.js" type="text/javascript" charset="utf-8"></script>

<script src="/static/common/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script>
	$(document).ready(function () {
		if (window != top) {
			top.location.href = location.href;
		}
	});
    // 点击更换验证码
    $('#yzm-click').on('click', function(e) {
        e.currentTarget.src = './getyzm?id=' + Math.random()
    })

	function loginAjax(){
		if(!$('#username').val()) {
			layer.msg('请输入账号');
			return false;
		}
		if(!$('#password').val()) {
			layer.msg('请输入密码');
			return false;
		}
        if(!$('#yzm').val()) {
            layer.msg('请输入验证码');
            return false;
        }
		const data = $('#form').serializeArray();
		$.post('',data , function(d) {
			if(d.code != 0) {
				layer.msg(d.msg);
				return false;
			}
			location.href = d.data;
		});
	}
	//点击登录
	$('#sub').on('click',loginAjax);
	//回车登录
	$(document).keyup(function(event){
		if(event.keyCode ==13){
			loginAjax();
		}
	});

</script>

</body>
</html>
